<template>
    <div class="vip">
        <div class="main">
            <section class="header">
            <!-- <img src="/img/vip/header_notAha.jpg" alt=""> -->
            <div class="inner">
                <div class="not_login">
                    <span class="span1">升级aha会员</span>
                    <img class="aha_logo" src="/img/vip/aha_logo.png" alt="">
                    <span class="span2">预计可省358+元</span>
                    <div class="icons_rights">
                        <ul class="top clear_fix">
                            <li class="item">
                                <a href=""><img src="/img/vip/icon_01.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">派对狂欢</p>
                                    <p>人气蛋糕</p>
                                    <p class="p">免费加大</p>
                                </div>
                            </li>
                             <li class="item">
                                <a href=""><img src="/img/vip/icon_13.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">乐翻全场</p>
                                    <p>全场蛋糕</p>
                                    <p>专享立减￥60</p>
                                </div>
                            </li>
                             <li class="item">
                                <a href=""><img src="/img/vip/icon_14.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">趣享甜宠</p>
                                    <p>原味土司</p>
                                    <p>享受0元加购</p>
                                </div>
                            </li>
                             <li class="item">
                                <a href=""><img src="/img/vip/icon_04.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">大咖沙龙</p>
                                    <p>心选蛋糕</p>
                                    <p>享会员价</p>
                                </div>
                            </li>
                             <li class="item">
                                <a href=""><img src="/img/vip/icon_05.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">早安吃呗</p>
                                    <p>法式星选套餐</p>
                                    <p>买2赠1</p>
                                </div>
                            </li>
                             <li class="item">
                                <a href=""><img src="/img/vip/icon_09.png" alt=""></a>
                                <div class="desc">
                                    <p class="title">aha值返利</p>
                                    <p>1aha值=1元</p>
                                    <p>返利当钱花</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            </section>

            <section class="entrance_buy50">
                <a href="" class="buy_vip">
                    <p>立即升级 ¥99/年</p>
                </a>
            </section>

             <section class="section_topic">
                <div class="inner">
                    <ul class="resourse">
                        <li class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="" class="buy_vip1">
                                    <img src="/img/vip/356DD90B237EE16863E895650B240E26.jpg" alt="">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="rights_title">
                <p>
                    aha会员专享权益
                </p>
                <a href="">权益说明</a>
            </section>


            <!-- 大咖沙龙 -->
          <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">大咖沙龙</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>心选人气蛋糕 会员专享优惠价</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.5rem"
                                            height="4.5rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/list_23954.jpg"
                                        />
                                        <p class="corner_mark">
                                            <b>木糖醇</b>
                                        </p>
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>福禄寿喜</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                ￥388/2磅
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bottom">
                    <a href="">查看更多</a>
                </div>
            </section>
            <div class="kx"></div>

            <!-- 派对狂欢 -->
             <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">派对狂欢</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>购买环游世界蛋糕2-4人食加大为5-8人食</p>
                        <p>*此权益限使用一次</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="10rem"
                                            height="4rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/img_upgrade.jpg"
                                        />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bottom">
                    <a href="">立即使用</a>
                </div>
            </section>
              <div class="kx"></div>

            <!-- 乐翻全场 -->
            <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">乐翻全场</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>全场蛋糕立减60元</p>
                        <p>*此权益限使用一次</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="11rem"
                                            height="4rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/img_dis60.jpg"
                                        />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bottom">
                    <a href="">立即使用</a>
                </div>
            </section>

              <div class="kx"></div>
            <!-- 趣享甜宠 -->
             <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">趣享甜宠</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>0元加购原味匠心吐司</p>
                        <p>*此权益限使用一次</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="11rem"
                                            height="4rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/img_addZeroBuy.jpg"
                                        />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bottom">
                    <a href="">立即使用</a>
                </div>
            </section>
              <div class="kx"></div>

            <!-- 早安吃呗 -->
             <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">早安吃呗</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>购法式星选套餐，享买2赠1特权</p>
                        <p>配送范围：华东诺心可配送区域</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="11rem"
                                            height="4rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/img_toast.jpg"
                                        />
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bottom">
                    <a href="">立即使用</a>
                </div>
            </section>
              <div class="kx"></div>

            <!-- aha值返利 -->
             <section class="right">
                <div class="top">
                    <h2 class="title">
                        <a href="">aha值返利</a>
                        <!-- <a href="">权益详情</a> -->
                    </h2>
                    <div class="desc">
                        <p>aha值当钱花 1aha值=1元</p>
                    </div>
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="11rem"
                                            height="4rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/vip/img_ahaValue.png"
                                        />
                                        <div class="aha">
                                            <p>您当前aha值:0</p>
                                            <br>
                                            <p>已使用aha值:0</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
              <div class="kx" style="height:100px;line-height:100px;text-align:center;color:#9c9c9c">
                <p>更多aha会员惊喜权益 &nbsp; 敬请期待</p>
              </div>
                <section class="entrance_buy50">
                <a href="" class="buy_vip">
                    <p>立即升级 ¥99/年</p>
                </a>
            </section>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                vip: {},
            }
        },
    }
</script>

<style lang="scss" scoped>
html{
    font-size: 100px;
}
body{
    width: 100%;
    max-width: 640px;
    position: relative;
    margin: auto;
    background: #f4f4f4;
    color: #3e3e3e;
    font: 0.12rem/1.5 "Hiragino Sans GB", STFangsong, "Microsoft YaHei", Helvetica, STXihei, Arial, serif;
    font-weight: normal;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100% !important;
    font-family: -apple-system, Helvetica, sans-serif;
}
.main .header{
    background:url(/public/img/vip/header_notAha.jpg) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    max-width: 640px;
    height: 337px;
    margin: 0 auto;
}
.inner{
    color: #fff;
    width: 92%;
    margin: auto;
}
.not_login{
    padding-top: 20px;
    text-align: center;
}
.not_login .span1{
    font-size: 18px;
}
.not_login .aha_logo{
    display: inline-block;
    width: 57px;
    height: 25px;
    max-width: 100%;

}
.not_login .span2{
    font-size: 15px;
    display: inline-block;
}
.icons_rights{
    padding: 35px 0 20px 0;
    max-width: 588px;
    height: 285px;
}
.icons_rights ul{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    // padding-inline-start: 40px;
}
.clear_fix:after{
    content: " ";
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.icons_rights ul li{
    float: left;
    width: 33.33%;
    overflow: hidden;
    text-align: center;
    margin-top: 0.1rem;
    cursor: pointer;
}
.inner .icons_rights ul li a{
    position: relative;
    display: block;
    font-size: 100%;
    color: inherit;
    
    text-align: center;
}
.inner .icons_rights ul li a img{
    width: 43px;
    height: 43px;
    max-width: 100%;
    vertical-align: top;
    // margin-bottom: 0;
}
.inner .icons_rights ul li .desc{
    font-size: 0.09rem;
    color: #3e3e3e;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    max-width: 192px;
}
.inner .icons_rights ul li .desc .title{
    font-size: 11px;
    color: #fff;
    display: block;
    margin:11px 5px 5px 0 ;
    // margin-block-start: 1em;
    // margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
}
.inner .icons_rights ul li p{
    font-size: 0.9px;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 5px;
}
.inner .icons_rights  ul li p:nth-child(3){
    margin-bottom: 11px;
}
.entrance_buy50{
    margin-top: 0;
    padding: 2px 15px 0 15px;
    position: relative;
    margin-top: 20px;
}
.entrance_buy50 a{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    background: url(/public/img/vip/bg_btn.png);
    background-size:100% 100%;
    max-width: 640px;
    margin: auto;
}
.entrance_buy50 p{
    font-size: 15px;
    font-weight: bold;
}
.section_topic{
    padding-top: 20px;
    margin: auto;
    padding: 0;
    border: 0;
    position: relative;
    width: 100%;
    height: 92px;
    max-width: 640px;
    cursor: pointer;
}
.section_topic .inner{
    width: 96%;
    margin: auto;
}
.section_topic .inner .resourse{
    margin: auto;
    margin-right: auto;
    overflow: hidden;
    z-index: 1;
    margin-block-start: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.section_topic .inner .resourse li{
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: content-box;
}
.section_topic .inner .resourse li img{
    display: block;
    max-width: 100%;
}
.rights_title{
    font-size: 18px;
    padding: 30px 0 10px 0;
    text-align: center;
    margin-top: 0;
    position: relative;
}
.rights_title p{
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}
.rights_title p:before{
    content: '';
    width: 65.5px;
    height: 3px;
    background:url(/public/img/vip/line_left.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 5%;
    top: 50%;
}
.rights_title p:after{
    content: '';
    width: 65.5px;
    height: 3px;
    background: url(/public/img/vip/line_right.png) no-repeat center;
    position: absolute;
    right: 5%;
    top: 50%;
}
.rights_title a{
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    color: #c9c9c9;
    text-decoration: underline;
    padding-top: 20px;
}
.right{
    margin: auto;
    padding: 20px 0;
    border: 0;
    max-width: 640px;
}
.right .top{
    padding: 0 4%;
    margin: 0;
    border: 0;
    color: #3e3e3e;
}
.right .top .title{
    display: block;
    // margin-block-start: 0.83em;
    // margin-block-end: 0.83em;
    // margin-inline-start: 0px;
    // margin-inline-end: 0px;
}
.right .top .title a{
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 50%;
    color: #3e3e3e;
}
.right .top .desc{
    color: #c9c9c9;
    margin-top: 10px;
}
.right .top .desc p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.right .top .p_list{
    margin-top: 15px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    // padding-inline-start: 40px;
}
.right .top  ul li{
    // float: left;
    width: 48%;
    // height: 48%;
    position: relative;
    display: list-item;
    color: #3e3e3e;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
}
.right .top  ul li .item_info{
    // padding: 0 0 12px;
    font-size: 12px;
}
.right .top  ul li .item_message{
    position: relative;
}
.right .top  .corner_mark{
    position: absolute;
    width: 53px;
    height: 54px;
    // left: -2px;
    top: -10px;
    background: url(/public/img/vip/cornerMark.png) no-repeat;
    background-size: 100% 100%;
    // overflow: hidden;
    z-index: 2;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.right .top  .corner_mark b{
    position: absolute;
    width: 100%;
    height: 12px;
    line-height: 12px;
    color: #483f35;
    transform: rotate(-45deg);
    text-align: center;
    left: -6px;
    top: 13px;
    overflow: hidden;
}
.right .top .item_detal{
    // position: relative;
    height: 68px;
    padding: 2px 0;
    font-size: 12px;
}
.right .top .item_detal .name_wrap{
    height: 50px;
    overflow: hidden;

}
.right .top .item_detal h3{
    padding: 2px 0;
    line-height: 16px;
}
.right .top .item_detal h4{
    display: block;
    background-color: red;
}
.right .top .price{
    color: #cea461;
    display: inline-block;
    margin-right: 2px;
    font-size: 14px;
    margin-top: 20px;
}
.right .bottom{
    padding-top: 20px;
    border-top: 1px solid #e0dcd1;
    text-align: center;
    // margin-top: 240px;
}
.right .bottom a{
    color: #b3925f;
    font-size: 15px;
}
.kx{
    max-width: 580px;
    height: 15px;
    background-color:#f6f3f3;
    margin: auto;
}

.aha{
    position: absolute;
    top: 45px;
    left: 30px;
    font-size: 16px;
    color: #fff;
}
</style>